<template >
	<h2>分类</h2>

	<view class="ddd">
	</view>

	<view class="aa" >
		<view class="d1">
			<ul>
				<li class="oli" v-for="(v,i) in arr.arr" :key="v.id"  @click="selId=v.id">
					<view class="" ><button size="mini" class="active">{{v.title}}</button></view>
				</li>
				
			</ul>
		</view>

		<view  >
			<!-- v-show="isww" -->
			<navigator class="d2" url="/pages/classification-list/classification-list">
				<view class="dd" v-for="(v,i) in data2" :key="v.id"  @click="chh(data3)">
					<image :src="src" mode=""></image>
					<text >
						{{v.tit}}
					</text>
				</view>
			</navigator>
		</view>


	</view>

</template>

<script>
	import http from '../../utils/http.js'
	import { useStore } from 'vuex'
	import {
		ref,
		onMounted,
		reactive,
		computed
		
	} from 'vue'
	export default {

		setup() {
			 const store = useStore()
			let arr = reactive([]) 
			let arrx = reactive([]) 
			
			let selId = ref(1);
			
			let src='../../static/image/classification/u259.png'
			
			  function chh(v){
				  console.log(v)
				  store.commit('classification/so',v)
				  
			  }
			
			function find(id, res) {
			        for (let i = 0; i < res.length; i++) {
			            if (res[i].id == id) {
			                return i
			            }
			        }
			        return -1
			    }
			    function fn(data) {
			        let res = [];
			        for (let i = 0; i < data.length; i++) {
			            let n = find(data[i].zzfl_id, res)
			            if (n != -1) {
			                //找到了
			                res[n].child.push({
			                    id: data[i].ejzzfl_id,
			                    tit: data[i].ejzzfl_mingcheng
			                })
			            } else {
			                //没找到
			                res.push({
			                    id: data[i].zzfl_id,
			                    title: data[i].zzfl_mingcheng,
			                    child: [
			                        {
			                            id: data[i].ejzzfl_id,
			                            tit: data[i].ejzzfl_mingcheng
			                        }
			                    ]
			                })
			            }
			        }
			        return res;
			    }
				function fnn(data) {
				    let res = [];
				    for (let i = 0; i < data.length; i++) {
				        let n = find(data[i].ejzzfl_id, res)
				        if (n != -1) {
				            //找到了
				            res[n].child.push({
				                id: data[i].yp_id,
				                tit: data[i].yp_mingcheng,
				                qian: data[i].yp_jiage,
				                gg: data[i].yp_guige,
				                img: data[i].yp_imgsrc,
				                bo: data[i].yp_lubosrc,
				                shuo:data[i].yp_shuomingsrc,
								wh:data[i].yp_pizhunwenhao,
								gn:data[i].yp_zhuzhigongneng,
								yf:data[i].yp_yunfei,
								yfyl:data[i].yp_yongfayongliang
				            })
				        } else {
				            //没找到
				            res.push({
				                id: data[i].ejzzfl_id,
				                title: data[i].ejzzfl_mingcheng,
				                child: [
				                    {
				                        id: data[i].yp_id,
				                        tit: data[i].yp_mingcheng,
										qian: data[i].yp_jiage,
										gg: data[i].yp_guige,
										img: data[i].yp_imgsrc,
										 bo: data[i].yp_lubosrc,
										 shuo: data[i].yp_shuomingsrc,
										 wh:data[i].yp_pizhunwenhao,
										 gn:data[i].yp_zhuzhigongneng,
										 yf:data[i].yp_yunfei,
										 yfyl:data[i].yp_yongfayongliang
				                    }
				                ]
				            })
				        }
				    }
				    return res;
				}
				
			onMounted(() => {
				
				http({
					url: '/classification',
					
				}).then((res) => {
					
				let ress=fn(res.data.data)
					// console.log(ress)
					arr.arr=ress
					// console.log(arr.arr)
					// console.log(arr)
				})
				
				http({
					url: '/classification-list',
					// data: arrx
					
				}).then((res) => {
					// console.log(res)
				let ress=fnn(res.data.data)
					// console.log(ress)
					arrx.arrx=ress
					// console.log(arrx.arrx)
					
				})
				
			})
			let data2=computed(()=>{
				if(!arr.arr) return
				
				let at=arr.arr.filter((v)=>{
					
				if(v.id==selId.value){
					
					return v.child
				}
			
				})
				return at[0].child
				
			})
			
			let data3=computed(()=>{
				
				let at=arrx.arrx.filter((v)=>{
					
				if(v.id==selId.value){
					
					return v.child
				}
				
				})
				return at[0].child
			})
			
			let setId=(id)=>{
				selId.value=id
				console.log(selId,'id')
			}
			return {
				setId,
				selId,
				arr,
				arrx,
				src,
				find,
				fn,
				data2,
				chh,
			data3
			}

		},
		data() {
			return {

			}
		},
		methods: {
			
		
		}
		
	}
</script>

<style>
	.ddd {
		height: 1rpx;
		background-color: #F2F2F2;
		margin: 30rpx 0;
	}

	html,
	body,
	ul,
	li {
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
	}

	image {
		width: 72rpx;
		height: 72rpx;
		margin: 0 auto;
	}

	button {
		background-color: #f2f2f2;
		width: 200rpx
	}

	.dd {
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		align-content: flex-start;
		width: 183.3rpx;
	}

	text {
		width: 100%;
	}

	.aa {
		display: flex;
		width: 750rpx;
	}

	.aa d1 {
		width: 250rpx;
	}

	.aa d2 {
		width: 500rpx;
	}

	.d2 {
		display: flex;
		width: 550rpx;
		flex-wrap: wrap;
	}

	.oli:hover .active {
		background-color: #ffffff;
		border-bottom: 1px solid #D32023;
	}
</style>
